<%-- web/blogList.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<<<<<<< HEAD
<<<<<<< HEAD
<html>
<head>
<<<<<<< HEAD
<<<<<<< HEAD
  <title>博客天地</title>
=======
  <title>匿名留言版</title>
>>>>>>> 2c9a92f (新增删除博客功能)
=======
  <title>匿名留言版</title>
>>>>>>> a05f6f6 (密码密文存储)
  <style>
    /* 基础样式 */
=======
=======
>>>>>>> d93a5bb (移除index页)
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
  <title>匿名留言版</title>
  <style>
    /* 保持原有样式不变 */
<<<<<<< HEAD
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    body {
      margin: 0;
      font-family: 'Segoe UI', system-ui;
      min-height: 100vh;
      background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('pic/bg.jpg');
      background-size: cover;
      background-attachment: fixed;
      color: #333;
    }

<<<<<<< HEAD
<<<<<<< HEAD
    /* 内容容器 */
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

<<<<<<< HEAD
<<<<<<< HEAD
    /* 头部样式 */
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      padding: 1rem;
      background: rgba(255,255,255,0.95);
      border-radius: 10px;
      box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    }

    .header-title {
      color: #2c3e50;
      margin: 0;
      font-size: 2.2rem;
    }

<<<<<<< HEAD
<<<<<<< HEAD
    /* 操作按钮 */
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    .action-buttons {
      display: flex;
      gap: 1rem;
    }

    .btn {
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      text-decoration: none;
    }

    .btn-primary {
      background: #3498db;
      color: white;
    }

    .btn-secondary {
      background: #ecf0f1;
      color: #2c3e50;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

<<<<<<< HEAD
<<<<<<< HEAD
    /* 博客卡片 */
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    .blog-list {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .blog-card {
      background: rgba(255,255,255,0.98);
      border-radius: 12px;
      padding: 1.5rem;
      transition: transform 0.3s ease;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
      position: relative; /* 添加相对定位 */
=======
      position: relative;
      cursor: pointer;
>>>>>>> a05f6f6 (密码密文存储)
=======
      position: relative;
      cursor: pointer;
>>>>>>> 2acfcf7 (详情页)
=======
      position: relative;
      cursor: pointer;
>>>>>>> d93a5bb (移除index页)
    }

    .btn-delete {
      background: #e74c3c;
      color: white;
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
      padding: 0.3rem 0.6rem; /* 缩小按钮大小 */
=======
      padding: 0.3rem 0.6rem;
>>>>>>> a05f6f6 (密码密文存储)
=======
      padding: 0.3rem 0.6rem;
>>>>>>> 2acfcf7 (详情页)
=======
      padding: 0.3rem 0.6rem;
>>>>>>> d93a5bb (移除index页)
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
      position: absolute; /* 绝对定位 */
      top: 0.5rem; /* 距离顶部 */
      right: 0.5rem; /* 距离右侧 */
      font-size: 0.8rem; /* 缩小字体 */
=======
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 0.8rem;
<<<<<<< HEAD
<<<<<<< HEAD
      z-index: 2; /* 确保按钮在卡片上层 */
>>>>>>> a05f6f6 (密码密文存储)
=======
      z-index: 2;
>>>>>>> 2acfcf7 (详情页)
=======
      z-index: 2;
>>>>>>> d93a5bb (移除index页)
    }

    .btn-delete:hover {
      background: #c0392b;
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> 2c9a92f (新增删除博客功能)
=======
>>>>>>> a05f6f6 (密码密文存储)
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    }

    .blog-card:hover {
      transform: translateY(-5px);
    }

    .blog-title {
      color: #2c3e50;
      margin-top: 0;
      font-size: 1.4rem;
    }

    .blog-content {
      color: #666;
      line-height: 1.6;
      white-space: pre-wrap;
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
      max-height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
>>>>>>> a05f6f6 (密码密文存储)
=======
      max-height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
>>>>>>> 2acfcf7 (详情页)
=======
      max-height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
>>>>>>> d93a5bb (移除index页)
    }

    .blog-meta {
      margin-top: 1rem;
      font-size: 0.9rem;
      color: #95a5a6;
    }

<<<<<<< HEAD
<<<<<<< HEAD
    /* 空状态提示 */
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    .empty-state {
      text-align: center;
      padding: 4rem;
      background: rgba(255,255,255,0.9);
      border-radius: 10px;
      color: #7f8c8d;
    }
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======

    /* 详情页样式 */
    .blog-detail {
      background: rgba(255,255,255,0.98);
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 5px 20px rgba(0,0,0,0.15);
      position: relative;
      margin-top: 1rem;
    }

    .back-button {
      position: absolute;
      top: 1rem;
      right: 1rem;
      padding: 0.5rem 1rem;
      background: #95a5a6;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .detail-content {
      white-space: pre-wrap;
      line-height: 1.8;
      font-size: 1.1rem;
      margin: 1.5rem 0;
    }
>>>>>>> a05f6f6 (密码密文存储)
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1 class="header-title">
      <c:choose>
        <c:when test="${param.type == 'all'}">
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
          🌍 全部博客
=======
          🌍 全部内容
>>>>>>> 2c9a92f (新增删除博客功能)
=======
          🌍 全部内容
>>>>>>> a05f6f6 (密码密文存储)
=======
          🌍 全部内容
>>>>>>> 2acfcf7 (详情页)
=======
          🌍 全部内容
>>>>>>> d93a5bb (移除index页)
          <c:if test="${not empty user}">
            <span style="font-size: 0.8em; color: #7f8c8d;">(共 ${blogs.size()} 篇)</span>
          </c:if>
        </c:when>
        <c:otherwise>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
          ✨ ${not empty user ? user.username : '我的'}博客
          <span style="font-size: 0.8em; color: #7f8c8d;">(已创作 ${blogs.size()} 篇)</span>
=======
          ✨ ${not empty user ? user.username : '我的'} 留言版
          <span style="font-size: 0.8em; color: #7f8c8d;">(已发布 ${blogs.size()} 篇)</span>
>>>>>>> 2c9a92f (新增删除博客功能)
=======
          ✨ ${not empty user ? user.username : '我的'} 留言版
          <span style="font-size: 0.8em; color: #7f8c8d;">(已发布 ${blogs.size()} 篇)</span>
>>>>>>> a05f6f6 (密码密文存储)
=======
          ✨ ${not empty user ? user.username : '我的'} 留言版
          <span style="font-size: 0.8em; color: #7f8c8d;">(已发布 ${blogs.size()} 篇)</span>
>>>>>>> 2acfcf7 (详情页)
=======
          ✨ ${not empty user ? user.username : '我的'} 留言版
          <span style="font-size: 0.8em; color: #7f8c8d;">(已发布 ${blogs.size()} 篇)</span>
>>>>>>> d93a5bb (移除index页)
        </c:otherwise>
      </c:choose>
    </h1>

    <div class="action-buttons">
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
      <a href="blogEdit.jsp" class="btn btn-primary">✏️ 写新博客</a>
=======
      <a href="blogEdit.jsp" class="btn btn-primary">✏️ 写新留言</a>
>>>>>>> 2c9a92f (新增删除博客功能)
=======
      <a href="blogEdit.jsp" class="btn btn-primary">✏️ 写新留言</a>
>>>>>>> a05f6f6 (密码密文存储)
=======
      <a href="blogEdit.jsp" class="btn btn-primary">✏️ 写新留言</a>
>>>>>>> 2acfcf7 (详情页)
=======
      <a href="blogEdit.jsp" class="btn btn-primary">✏️ 写新留言</a>
>>>>>>> d93a5bb (移除index页)
      <c:choose>
        <c:when test="${param.type == 'all'}">
          <a href="blog" class="btn btn-secondary">🔙 返回我的</a>
        </c:when>
        <c:otherwise>
          <a href="blog?type=all" class="btn btn-secondary">🌐 浏览全部</a>
        </c:otherwise>
      </c:choose>
    </div>
  </div>

  <c:choose>
    <c:when test="${empty blogs}">
      <div class="empty-state">
        <h2>📭 空空如也</h2>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
        <p>还没有任何博客内容，点击上方按钮开始创作吧！</p>
=======
        <p>您的留言板没有任何内容，点击上方按钮开始创作吧！</p>
>>>>>>> 2c9a92f (新增删除博客功能)
=======
        <p>您的留言板没有任何内容，点击上方按钮开始创作吧！</p>
>>>>>>> a05f6f6 (密码密文存储)
=======
        <p>您的留言板没有任何内容，点击上方按钮开始创作吧！</p>
>>>>>>> 2acfcf7 (详情页)
=======
        <p>留言板没有任何内容，点击上方按钮开始创作吧！</p>
>>>>>>> d93a5bb (移除index页)
      </div>
    </c:when>
    <c:otherwise>
      <div class="blog-list">
        <c:forEach items="${blogs}" var="blog">
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
          <div class="blog-card">
<<<<<<< HEAD
=======
            <!-- 删除按钮 -->
            <button class="btn btn-delete" onclick="deleteBlog(${blog.id})">🗑️</button>
>>>>>>> 2c9a92f (新增删除博客功能)
=======
          <div class="blog-card" data-id="${blog.id}">
            <button class="btn btn-delete" onclick="deleteBlog(${blog.id}, event)">🗑️</button>
>>>>>>> a05f6f6 (密码密文存储)
            <h3 class="blog-title">${blog.title}</h3>
            <pre class="blog-content">${blog.content}</pre>
=======
=======
>>>>>>> d93a5bb (移除index页)
          <div class="blog-card" data-id="${blog.id}">
            <button class="btn btn-delete" onclick="deleteBlog(${blog.id}, event)">🗑️</button>
            <h3 class="blog-title">${blog.title}</h3>
            <pre class="blog-content">
                ${fn:substring(blog.content, 0, 10)}${fn:length(blog.content) > 10 ? '...' : ''}
            </pre>
<<<<<<< HEAD
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
            <div class="blog-meta">
              <fmt:formatDate value="${blog.createTime}" pattern="yyyy-MM-dd HH:mm"/>
            </div>
          </div>
        </c:forEach>
      </div>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======

      <!-- 添加删除确认弹窗 -->
      <script>
        function deleteBlog(blogId) {
          if (confirm("确定要删除这条留言吗？")) {
            // 改为标准表单编码格式
=======
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)

      <script>
        // 删除功能
        function deleteBlog(blogId, event) {
<<<<<<< HEAD
<<<<<<< HEAD
          event.stopPropagation(); // 阻止事件冒泡
          if (confirm("确定要删除这条留言吗？")) {
>>>>>>> a05f6f6 (密码密文存储)
=======
          event.stopPropagation();
          if (confirm("确定要删除这条留言吗？")) {
>>>>>>> 2acfcf7 (详情页)
=======
          event.stopPropagation();
          if (confirm("确定要删除这条留言吗？")) {
>>>>>>> d93a5bb (移除index页)
            const formData = new URLSearchParams();
            formData.append('action', 'delete');
            formData.append('id', blogId);

            fetch('blog', {
              method: 'POST',
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              body: formData
            })
                    .then(response => {
                      if (response.ok) {
                        window.location.reload();
                      } else {
                        response.text().then(text => alert("错误：" + text));
                      }
                    })
                    .catch(error => console.error('Error:', error));
          }
        }
      </script>

      <!-- 添加删除按钮样式 -->
      <style>

      </style>
>>>>>>> 2c9a92f (新增删除博客功能)
=======
=======
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
              headers: {'Content-Type': 'application/x-www-form-urlencoded'},
              body: formData
            }).then(response => {
              if (response.ok) window.location.reload();
              else response.text().then(text => alert("错误：" + text));
            }).catch(error => console.error('Error:', error));
          }
        }

<<<<<<< HEAD
<<<<<<< HEAD
        // 点击卡片加载详情
        document.querySelectorAll('.blog-card').forEach(card => {
          card.addEventListener('click', function(e) {
            if (!e.target.closest('.btn-delete')) {
              loadBlogDetail(this.dataset.id);
            }
          });
        });

        // 加载详情函数
        async function loadBlogDetail(blogId) {
          try {
            const response = await fetch(`blog?action=detail&id=${blogId}`);
            const blog = await response.json();

            const detailHTML = `
              <button class="back-button" onclick="location.reload()">← 返回列表</button>
              <h1>${blog.title}</h1>
              <div class="blog-meta">
                发布于 ${blog.createTime}

              </div>
              <pre class="detail-content">${blog.content}</pre>
            `;

            document.querySelector('.container').innerHTML = `
              <div class="blog-detail">
                ${detailHTML}
              </div>
            `;
          } catch (error) {
            console.error('加载失败:', error);
            alert('加载博客内容失败');
          }
        }
      </script>
>>>>>>> a05f6f6 (密码密文存储)
=======
=======
>>>>>>> d93a5bb (移除index页)
        // 点击卡片跳转详情页
        document.querySelectorAll('.blog-card').forEach(card => {
          card.addEventListener('click', function(e) {
            if (!e.target.closest('.btn-delete')) {
              window.location.href = 'blog?type=detail&id=' + this.dataset.id;
            }
          });
        });
      </script>
<<<<<<< HEAD
>>>>>>> 2acfcf7 (详情页)
=======
>>>>>>> d93a5bb (移除index页)
    </c:otherwise>
  </c:choose>
</div>
</body>
</html>